/********************************************************************************
 *@description:  参与用户  lotteryTools/joinUser/index
 *@author: Xhd
 *@API: 
 *@date: 2024-01-16 10:36:33
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import { Form, Modal, Input, Space, Button } from 'antd';
import { apiGetParticipatingUserPage, apiBlockParticipatingUser } from "@/request/lotteryTools";
import ThePagination from '@/components/ThePagination';
import TheQueryForm from '@/components/TheQueryForm';
import TheButton from '@/components/TheButton';
import TheTable from '@/components/TheTable';
import store from "@/store/store";
import moment from 'moment';
import _ from 'lodash';

const { TextArea } = Input

class JoinUser extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columns: [
        {
          title: "用户ID",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "用户昵称",
          dataIndex: "nickName",
          key: "nickName",
        },
        {
          title: "手机号",
          dataIndex: "memberMobile",
          key: "memberMobile",
          render: (text) => {
            var reg = /^(\d{3})\d{4}(\d{4})$/;
            if (text) {
              var memberMobile = text.toString().replace(reg, '$1****$2');
              return memberMobile;
            }
          }
        },
        {
          title: "状态",
          dataIndex: "state",
          key: "state",
          render: (text) => {
            let label = ""
            switch (text) {
              case 1:
                label = "正常"
                break;
              case 2:
                label = "禁用"
                break;
              default:
                break;
            }
            return label;
          }
        },
        {
          title: "操作",
          fixed: "right",
          width: 300,
          render: (text, render) => {
            return (
              <div>
                <TheButton
                  haspermi={["lottery:joinUser:detail"]}
                  onClick={() => this.goDetail(render)}
                >
                  详情
                </TheButton>
                {render.state === 1 && <TheButton haspermi={["lottery:joinUser:banned"]}
                  onClick={() => this.banned(render.memberId)}
                > 封禁 </TheButton>}
                {render.state === 2 && <TheButton haspermi={["lottery:joinUser:unblocking"]}
                  onClick={() => this.unblocking(render.memberId)}
                > 解封 </TheButton>}
              </div>
            );
          },
        },
      ],
      dataSource: [],
      pageData: { pageNo: 1, pageSize: 10 },
      total: 0,
      searchValue: {},
      searchOption: [
        {
          field: "memberId",
          label: "用户ID",
          placeholder: "请输入ID",
          required: false,
          rules: [],
          type: "InputNumber",
          defaultValue: "",
        },
        {
          field: "nickName",
          label: "用户昵称",
          placeholder: "请输入昵称",
          required: false,
          rules: [],
          type: "Input",
          options: [],
          defaultValue: "",
        },
        {
          field: "memberMobile",
          label: "用户手机号",
          placeholder: "请输入手机号",
          required: false,
          rules: [],
          type: "InputNumber",
          options: [],
          defaultValue: "",
        },
        {
          field: "state",
          label: "用户状态",
          placeholder: "请选择状态",
          required: false,
          rules: [],
          type: "Select",
          options: [
            { value: "0", label: "全部" },
            { value: "1", label: "正常" },
            { value: "2", label: "禁用" },
          ],
          defaultValue: "0",
          banVisible: false,
          unbVisible: false,
          status: ''
        },
      ],
    }
  }
  componentDidMount() {
    let searchParams = store.getState().searchValue
    let { pageNo, pageSize, queryForm, pathName } = searchParams
    if (searchParams && pageNo && pathName == 'winning') {
      this.setState({
        queryForm,
        pageData: {
          pageNo: pageNo, pageSize: pageSize
        }
      }, () => {
        this.queryFormRef.onSetDefault({
          ...queryForm
        })
        this.getData()
      })
    } else {
      this.getData()
    }
  }

  getData = async (values) => {
    const { pageNo, pageSize } = this.state.pageData
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      const params = {
        pageNo, pageSize, queryForm: this.state.queryForm
      }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'winning',
          ...params
        }
      })
      let res = await apiGetParticipatingUserPage({
        pageNo, pageSize, ...this.state.queryForm
      })
      if (res.code === 0) {
        let data = res.data.map((item, key) => {
          item.index = (pageNo - 1) * pageSize + (key + 1)
          return item
        })
        this.setState({
          dataSource: data,
          total: res.totalCount
        })
      }
    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo,
        pageSize
      }
    }, () => this.getData())
  }
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onFormSearch(values) {
    this.setState({
      pageData: { pageNo: 1, pageSize: this.state.pageData.pageSize }
    }, () => {
      this.getData(values)
    })
  }
  
  banned = (memberId) => {
    this.setState({
      banVisible: true,
      status: 0,
      memberId
    })
  }
  unblocking = (memberId) => {
    this.setState({
      unbVisible: true,
      status: 1,
      memberId
    })
  }
  bannedFinish = async (values) => {
    const {memberId, status} = this.state
    await apiBlockParticipatingUser({memberId, operate:status, ...values }).then(res=>{
      if(res.code === 0) {
        this.setState({
          banVisible: false
        })
        this.getData()
      }
    })
  }
  unbFinish = async (values) => {
    const {memberId, status} = this.state
    await apiBlockParticipatingUser({memberId, operate:status, ...values }).then(res=>{
      if(res.code === 0) {
        this.setState({
          unbVisible: false
        })
        this.getData()
      }
    })
  }
  goDetail = (data) => {
    this.props.history.push(`/lotteryTools/joinUser/info/${data.memberId}`)
    
  }
  render() {
    const { columns, dataSource, pageData: { pageNo, pageSize }, total, searchOption, banVisible, unbVisible} = this.state;
    return (<div className='p-layout-box'>
      <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns} dataSource={dataSource} />
      <ThePagination pageNo={pageNo} pageSize={pageSize} total={total} pageChange={this.pageChange} />
      <Modal visible={banVisible}
        title={"封禁抽奖"}
        footer={null}
        destroyOnClose
        onCancel={()=>this.setState({banVisible: false})}
      >
        <Form onFinish={(values)=>this.bannedFinish(values)}>
          <Form.Item label="备注" name={"banReason"} rules={[{required: true}]} >
            <TextArea maxLength={50} showCount />
          </Form.Item>
          <Form.Item style={{textAlign: "center"}}>
            <Space>
              <Button onClick={()=>this.setState({banVisible: false})}>取消</Button>
              <Button type='primary' htmlType='submit' >保存</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
      <Modal visible={unbVisible}
        title={"解封抽奖"}
        footer={null}
        destroyOnClose
        onCancel={()=>this.setState({unbVisible: false})}
      >
        <Form onFinish={(values)=>this.unbFinish(values)}>
          <Form.Item label="备注" name={"unsealingReason"} rules={[{required: true}]} >
            <TextArea maxLength={50} showCount />
          </Form.Item>
          <Form.Item style={{textAlign: "center"}}>
            <Space>
              <Button onClick={()=>this.setState({unbVisible: false})}>取消</Button>
              <Button type='primary' htmlType='submit' >保存</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>)
  }
}

export default JoinUser